<template>
  <div>
    <div v-for="(_, row) in new Array(3)" :key="'row-' + row" class="board-row">
      <Square
        v-for="(_, col) in new Array(3)"
        :value="state.Squares[row * 3 + col]"
        @click="onSquareClick(row * 3 + col)"
        :key="'square-' + row * 3 + col"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import Square from "@/components/Square.vue";
import { IGameState } from "@/model/IGameState";

@Component({
  components: { Square }
})
export default class Board extends Vue {
  // region Prop
  @Prop({
    default: () => {
      return {
        Squares: new Array<string>(9).fill(""),
        IsNextX: true
      };
    }
  })
  state: IGameState;
  // endregion
  // region Data

  // endregion
  // region computed

  // endregion
  // region watch
  // endregion
  // region method
  onSquareClick(index: number) {
    this.$emit("click", index);
  }

  // endregion
  // region hook
  // endregion
}
</script>

<style></style>
